<!--
 * @Author: your name
 * @Date: 2021-08-06 15:15:05
 * @LastEditTime: 2021-08-06 15:41:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\19-插槽\具名插槽.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="../15-组件/css/common.css" />
  </head>
  <style>
    .contain {
      width: 400px;
      height: 400px;
      border: 1px solid #efa210;
    }
    .contain div {
      width: 50%;
      height: 20%;
      line-height: 40px;
      background-color: aqua;
      margin: auto;
      text-align: center;
      border: 1px solid #a655aa;
      margin-top: 20px;
    }
  </style>
  <body>
    <div id="app">
      <mylayout>
        <!-- es6使用template标签，指定里面的内容，在具体的插槽中显示 -->
        <!-- <div slot="header">这是头部</div>
        <div slot="body">这是主体</div>
        <div slot="footer">这是尾部</div> -->

        <!-- 规范是通过 <template> 元素上使用 v-slot 指令 -->
        <template v-slot:header>
          <span>通过template像插槽头部添加的内容</span>
        </template>

        <template v-slot:body>
          <span>通过template像插槽主体添加的内容</span>
        </template>

        <template v-slot:footer>
            <span>通过template像插槽尾部添加的内容</span>
        </template> 
      </mylayout>
    </div>
    <script>
      /*
       * 具名插槽默认名字是default即默认 slot的name属性是default
       * 在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
       */
      Vue.component("mylayout", {
        template: `
        <div class="contain">
            <div class="header">
                <slot name="header"></slot>
            </div>
            <div class="body">
                <slot name="body"></slot>
            </div>
            <div class="footer">
                <slot name="footer"></slot>
            </div>
        </div>
        `,
      });
      new Vue({
        el: "#app",
        data() {
          return {};
        },
      });
    </script>
  </body>
</html>
